{% extends "base.html" %}

{% block body %}

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
  <h1 class="h3 mb-0 text-gray-800">User Profile</h1>
</div>

<div class="row">
  <div class="col-lg-12 mb-4">
    <div class="card shadow mb-0">
      <div class="card-header py-3">
        <div class="d-sm-flex align-items-center justify-content-between">
          <h6 class="m-0 font-weight-bold text-primary">Details</h6>
          <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-warning shadow-sm"><i class="fas fa-edit fa-sm text-white-50"></i> Edit</a>
        </div>
      </div>
      <div class="card-body">
        <p><b>Username:</b> {{username}}</p>
        <p><b>Name:</b> {{name}}</p>
        <p><b>E-Mail:</b> {{email}}</p>
      </div>
    </div>
  </div>
</div>

{% end %}

{% block js %}
<script src="/static/js/empower-profile.js"></script>
{% end %}
